<template>
  <div class="label-main">
    <el-row :gutter="10">
      <el-col v-for="category in data" :key="category.id" :xs="24" :sm="24" :md="6">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <!-- 分类名 -->
            <span>{{ category.name }}</span>
          </div>
          <!-- 分类下的标签 -->
          <div>
            <nuxt-link
              :to="{path: `/label/${label.id}`, query: {name: label.name}}"
              v-for="label in category.labelList" :key="label.id">
              <el-tag size="small">{{ label.name }}</el-tag>
            </nuxt-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

  async asyncData({app}) {
    // 查询分类和标签
    const {data} = await app.$getCategoryAndLabel()
    return {data}
  }
}
</script>


<style>
.label-main {
  margin: 0 10px;
}

.label-main .el-col {
  margin-bottom: 20px;
}

.label-main .el-tag {
  margin-right: 5px;
  margin-bottom: 5px
}

.label-main .el-tag:hover {
  border-bottom: 1px solid #345DC2;
}

.label-main .el-card {
  min-height: 150px;
}
</style>
